<template>
  <div>
    <el-container style="position: absolute;top: 55px; left: 0; right: 0; bottom: 0;">
      <el-header style="display: flex; align-items: center; border-bottom: 1px solid #B3C0D1;">
        <!-- 头部 -->
        <div style="display: flex; margin-right:auto">
          <el-select
            v-model="searchFrom.order"
            size="mini"
            placeholder="图片的排序方式"
            style="width: 200px;margin-right: 20px;"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-input size="mini" style="width: 200px; margin-right: 20px;" placeholder="输入相册名称"></el-input>
          <el-button size="mini" type="success">搜索</el-button>
        </div>
        <el-button type="success" size="mini" @click="openAlbumModel(false)">创建相册</el-button>
        <el-button type="warning" size="mini">上传相册</el-button>
      </el-header>
      <el-container>
        <el-aside
          width="200px"
          class="bg-white border-right"
          style="position: absolute;top: 60px; left: 0; bottom: 60px;"
        >
          <!-- <div style="height: 1000px;"></div> -->
          <!--侧边/相册列表  -->
          <ul class="list-group list-group-flush">
            <li
              v-for="(item ,index) in albums"
              :key="index"
              class="list-group-item list-group-item-action d-flex align-items-center"
              @click.stop="albumsChange(index)"
              :class="{'active sum-active':albumsIndex===index}"
              style="cursor: pointer ;"
            >
              {{item.name}}
              <el-dropdown class="ml-auto">
                <span class="btn btn-light btn-sm border">
                  {{item.num}}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.stop.native="openAlbumModel({item,index})">修改</el-dropdown-item>
                  <el-dropdown-item @click.stop.native="albumsDel(index)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
          </ul>
        </el-aside>
        <el-container>
          <el-main style="position: absolute;left: 200px; top: 60px;right: 0; bottom: 60px;">
            <div style="height: 1000px;"></div>
          </el-main>
        </el-container>
      </el-container>
      <el-footer>Footer</el-footer>
    </el-container>

    <!-- 模态框 -->

    <el-dialog title="修改相册" :visible.sync="albumModel" width="30%">
      <el-form ref="albumForm" :model="albumForm" label-width="100px">
        <el-form-item label="相册名称">
          <el-input v-model="albumForm.name" size="medium" placeholder="请输入相册名称"></el-input>
        </el-form-item>

        <el-form-item label="相册排序">
          <el-input-number label="描述文字" v-model="albumForm.order" :min="0" size="medium"></el-input-number>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAlbumModel ">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchFrom: {
        order: {},
        keyword: "",
      },
      albums: [],
      albumsIndex: 0,
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      albumModel: false,
      albumForm: {
        name: "",
        order: "",
      },
      albumEditIndex: -1,
    };
  },

  created() {
    this.init();
  },

  methods: {
    init() {
      for (let i = 0; i < 20; i++) {
        this.albums.push({
          name: "相册" + i,
          num: Math.floor(Math.random() * 100),
          order: 0,
        });
      }
    },

    //切换相册
    albumsChange(index) {
      this.albumsIndex = index;
    },
    // 删除相册
    albumsDel(index) {
      //1、先提示用户删除
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.albums.splice(index, 1);
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      });
    },
    // 修改相册
    albumsEdit(index, data) {
      console.log(data);
      this.albums[this.albumEditIndex].name = this.albumForm.name;
      this.albums[this.albumEditIndex].order = this.albumForm.order;
    },
    //打开弹框
    openAlbumModel(obj) {
      console.log("obj", obj);
      if (obj) {
        let { item, index } = obj;
        //初始化表单
        this.albumForm.name = item.name;
        this.albumForm.order = item.order;
        this.albumEditIndex = index;
        //打开弹框
        this.albumModel = true;
      } else {
        //创建相册
        this.$set(this.albumForm, "name", "");
        this.$set(this.albumForm, "order", 0);
        this.albumEditIndex = -1;
        this.albumModel = true;
      }
    },
    //点击确定修改/新建相册
    confirmAlbumModel() {
      //判断是否为修改
      if (this.albumEditIndex > -1) {
        this.albumsEdit();
        return (this.albumModel = false);
      }

      this.albums.unshift({
        name: this.albumForm.name,
        order: this.albumForm.order,
      });
    },
  },
};
</script>

<style>
.sum-active {
  color: #67c23a !important;
  background-color: #f0f9eb !important;
  border-color: #c2e7c0 !important;
}
</style>
